<template>
    <li class="item">
        <div class="card">
            <div class="img-wrapper">
                <img :src="require(`../../assets/img/${item.name}.jpg`)" alt="">
                <div class="mask">
                    <h1>{{ item.name }}</h1>
                    <h2>{{ item.startday }}</h2>
                </div>
            </div>
        </div>
    </li>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            default: {}
        }
    }    
}

</script>

<style lang="less" scoped>
    .item{
        padding: .15rem;
        box-sizing: border-box;
        .card{
           border: 1px solid #ddd;
           border-radius:.15rem;
           box-shadow: 0.01rem 0.01rem 0.05rem #ddd;
           overflow: hidden;
           .img-wrapper{
              position: relative;
              .mask{
                position: absolute;
                left:0;
                top:0;
                width:100%;
                height:100%;
                background: rgba(0,0,0,.4);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                h1{
                    color:#de4040;
                    font-size:.35rem;
                    font-weight: bold;
                }
                h2{
                    color:#fff;
                    margin-top: 0.2rem;
                }
              }
          }
        }
    }
</style>